<template>
	<view class="page-body">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"> 
			<view class="top_view"></view> 
		</view> 
		<!-- #endif -->
		<!-- 头部导航 -->
		<view class="header">
			<view class="left_box" @click="goBack()">
				<image class="left_icon" mode="widthFix" src="@/static/images/leftMark_icon.png"></image>
			</view>
			<view class="title">待分配{{ total ? `(${total})` : ''}}</view>
			<view class="right_box"></view>
		</view>

		<!-- 导航 -->
		<view class="navBox">
			<view class="screenBox">
				<view class="screen_ul">
					<block v-for="(item,idx) in screenArr" :key="idx">
						<view class="screen_li" v-if="idx == '0'" @click="actionSheetTap(idx)">{{item.laber}}
							<image class="small_down" src="@/static/images/small-down.png"></image>
						</view>
						<channel-picker v-else-if="idx == '1'" class="screen_li" :defaultRegion="[0, 0]"  @getRegion="handleGetRegion">
							{{item.laber}}
							<image class="small_down" src="@/static/images/small-down.png"></image>
						</channel-picker>
					</block>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="content_box">
			<view class="list_ul">
				<checkbox-group @change.stop="checkboxChange">
					<block v-for="(item,idx) in clueList" :key="'a_'+ idx">
						<view class="list_li">
							<checkbox class="checkbox checkbox_li" :value="item.id" :checked="item.checked" />
							<view class="ou_li" @click="goDetails(item.id, item)">
								<image class="levelImg" v-if="item.intentionLevel" :src="require('@/static/images/level_'+ item.intentionLevel +'.png')"></image>
								<view class="left_box">
									<view class="info_box">
										<view class="info_name">{{item.customerName}}</view>
										<view class="info_assgin">{{item.clueStatus}}</view>
									</view>
									<view class="info_box">
										<view class="info_time">派发时间：{{item.distributeTime | dataFormat }}</view>
									</view>
									<!-- <view class="frequency">
										跟进<text>{{item.followNum || 0}}</text>次 到店<text>{{item.shopNum || 0}}</text>次
									</view> -->
								</view>
							</view>
							<view  @click="goDetails(item.id, item)">
								<view class="ou_li">
									<image class="iconImg" src="@/static/images/model_icon.png"></image>
									<view class="">{{item.intentCarModel}}/{{item.intentCarStyle}}</view>
								</view>
								<view class="ou_li">
									<image class="iconImg" src="@/static/images/channel_icon.png"></image>
									<view class="">{{item.firstChannelName}}/{{item.secondChannelName}}</view>
								</view>
								<view class="ou_li last_li">
									<image class="iconImg" src="@/static/images/reportForm_icon.png"></image>
									跟进<text class="follow_num">{{item.followNum || 0}}</text>次 | 到店<text class="follow_num">{{item.shopNum || 0}}</text>次
								</view>
								<view class="manualCleaning" v-if="item.cleanProp == '人工清洗'">
									<image src="@/static/images/manualCleaning.png"></image>
								</view>
							</view>
						</view>
					</block>
				</checkbox-group>
			</view>
		</view>
		
		<view class="allocation">
			<view class="btn cancel" @click="selectAll">
				<checkbox class="checkbox" value="all" :checked="isAll"/>
				<text>全选</text>
			</view>
			<view class="btn submit" @click="assignedTo()">分配给</view>
		</view>
	</view>
</template>

<script>
	import {
		getAssign
	} from '@/service/api/api.js';
	import {
		parseTime
	} from "@/common/util.js"
	import channelPicker from '../../components/channelPicker.vue'
	export default {
		components: {
			channelPicker
		},
		data() {
			return {
				userInfo: {},
				listQuery: {
					deptId: '',
					userId: '',
					roleType: '',
					firstChannelIds: '',
					secondChannelIds: '',
					intentCarModels: '',
					intentCarStyles: '',
				},
				screenArr: [{
					laber: '意向车型',
					valList: ''
					// ['车系&车型', '车型']
				}, {
					laber: '来源渠道',
					valList: ''
				}],
				clueList: [
					// {
					// 	intentionLevel: 'A',
					// 	customerName: '高强',
					// 	assignTime: '04-23  08:00',
					// 	intentCarModel: '官网',
					// 	intentCarStyle: '汽车之家',
					// 	firstChannelName: '官网',
					// 	secondChannelName: '汽车之家'
					// },
				],
				total: 0,
				isAll: false,
				ids: []
			}
		},
		filters: {
			dataFormat(val) {
				return parseTime(val, '{y}-{m}-{d} {h}:{i}')
			}
		},
		computed:{
			intentionCar(){
				return this.$store.state.intentionCar
			}
		},
		watch:{
			intentionCar (newVal, oldVal) {
				// 数据变化后，调用b组件内的函数
				this.listQuery.intentCarStyles = newVal['intentCarStyle']
				this.init()
			}
		},
		onUnload() {
			this.$store.commit('changeIntentionCar', {})
		},
		onLoad() {
			try {
				this.userInfo = uni.getStorageSync('user_info')
				// console.log(this.userInfo)
			} catch (e) {

			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.reqClueList()
			},

			reqClueList() {
				let data = this.listQuery
				let newData = {}
				for (let key in data) {
					if (data[key] && data[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
						newData[key] = data[key]
					}
				}

				getAssign({
					...newData,
					deptId: this.userInfo.userDeptId,
					roleType: this.userInfo.role,
					userId: this.userInfo.userId
				}).then(res => {
					if (res.data.code == 0) {
						this.clueList = res.data.data.uniques
						this.total = res.data.data.todoAssign
					} else {

					}
				})
			},
			
			actionSheetTap(idx) {
				let screenArr = this.screenArr[idx]
				if(idx == 0) {
					uni.navigateTo({
						url: '/pages/clue/series/index'
					})
				} else {
					
				}
			},

			checkboxChange(e) {
				this.ids = e.detail.value
				if(this.ids.length == this.clueList.length) {
					this.isAll = true
				} else {
					this.isAll = false
				}
			},
			
			selectAll(e){
				this.isAll = !this.isAll
				let ids = []
				if(this.isAll){
					this.clueList.forEach(item => {
						item.checked = true
						ids.push(item.id)
					})
				} else {
					this.clueList.forEach(item => {
						item.checked = false
					})
					ids = []
				}
				this.ids = ids
			},

			connectByPhone(phoneNumber) { //拨打电话
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				});
			},
			
			//短信
			smsTest(phoneNumber) {
				// #ifdef APP-PLUS
				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
				msg.to = [phoneNumber];
				msg.body = '';
				plus.messaging.sendMessage(msg);
				// #endif
			},

			goDetails(id,item) {
				uni.navigateTo({
					url: `/pages/clue/clueDetails/index?id=${id}&phone=${item.mobile}&followNum=${item.invalidNum || 0}&tabIdx=1&clueStatus=${item.clueStatus}`
				})
			},
			
			assignedTo() {
				if(this.ids && this.ids.length <= 0) {
					uni.showToast({
						icon: "none",
						title: '请选择要分配的线索'
					})
					return false
				}
				uni.setStorageSync('assignIds', this.ids)
				uni.navigateTo({
					url: `/pages/clue/manager/allocation/index`
				})
			},
			
			handleGetRegion(region) {
				this.listQuery.firstChannelIds = region[0].channelId
				this.listQuery.secondChannelIds = region[1].channelId
				this.reqClueList()
				// this.listQuery.channelName = region[1].channelId ? region[1].name : region[0].name
			},

			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
